<template>
  <view class="material-inbound">
    <!-- 自定义导航栏 -->
    <cu-custom bgColor="bg-gradual-blue" :isBack="true">
      <block slot="content">
        <text class="nav-title">物料入库单</text>
      </block>
      <block slot="right">
        <view class="nav-right" @click="openFilterModal">
          <text class="cuIcon-filter"></text>
          <text class="filter-text">筛选</text>
        </view>
      </block>
    </cu-custom>

    <!-- 状态标签页 -->
    <view class="tabs-container">
      <scroll-view class="tabs-scroll" scroll-x="true">
        <view class="tabs-wrapper">
          <view
            v-for="tab in businessTypeTabs"
            :key="tab.value"
            class="tab-item"
            :class="{ active: activeTab === tab.value }"
            @click="switchTab(tab.value)"
          >
            <text class="tab-text">{{ tab.label }}</text>
            <view class="tab-indicator" v-if="activeTab === tab.value"></view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 入库单列表 -->
    <view class="inbound-list">
      <view
        v-for="item in inboundList"
        :key="item.id"
        class="inbound-item"
        :class="{ expanded: expandedItems.includes(item.id) }"
      >
        <!-- 默认显示区域 -->
        <view class="item-header" @click="toggleExpand(item.id)">
          <view class="header-content">
            <view class="primary-info">
              <view class="order-info">
                <text class="order-no">{{ item.inboundNo }}</text>
                <text class="business-no"
                  >关联业务单号: {{ item.businessNo || "-" }}</text
                >
              </view>
              <view class="status-info">
                <!-- 业务类型 -->
                <text class="status-value" :class="item.orderTypeTextClass">{{
                  getOrderTypeText(item.orderType)
                }}</text>
                <!-- 入库状态 -->
                <text class="status-text" :class="item.statusClass">{{
                  item.statusText
                }}</text>
              </view>
            </view>
            <view
              class="expand-icon"
              :class="{ rotated: expandedItems.includes(item.id) }"
            >
              <text class="cuIcon-unfold"></text>
            </view>
          </view>
          <view class="status-indicator" :class="item.orderTypeClass"></view>
          <view class="order-type-indicator" :class="item.statusClass"></view>
        </view>

        <!-- 展开显示区域 -->
        <view class="item-details" v-if="expandedItems.includes(item.id)">
          <view class="detail-grid">
            <view class="detail-item">
              <text class="label">批次号</text>
              <text class="value">{{ item.batchNo }}</text>
            </view>
            <view class="detail-item">
              <text class="label">计划入库时间</text>
              <text class="value">{{ formatDate(item.planInboundTime) }}</text>
            </view>
            <view class="detail-item">
              <text class="label">实际入库时间</text>
              <text class="value">{{
                formatDate(item.actualInboundTime)
              }}</text>
            </view>
            <view class="detail-item">
              <text class="label">操作人</text>
              <text class="value">{{ item.operatorNames || "暂无" }}</text>
            </view>
          </view>
          <!-- 展开显示区域 - 入库明细 -->
          <view class="details-header">
            <text class="details-title">入库明细</text>
            <text class="details-count"
              >共{{ item.details ? item.details.length : 0 }}项</text
            >
          </view>
          <view class="details-content">
            <view
              v-if="!item.groupedDetails || item.groupedDetails.length === 0"
              class="no-details"
            >
              <text>暂无明细数据</text>
            </view>
            <view v-else>
              <!-- 按物料分组显示 -->
              <view
                v-for="group in item.groupedDetails"
                :key="group.materialCode"
                class="material-group"
              >
                <!-- 物料分组头部 - 显示汇总信息 -->
                <view
                  class="group-header"
                  @click="toggleMaterialGroup(item.id, group.materialCode)"
                >
                  <view class="group-info">
                    <view class="material-info">
                      <text class="material-code">{{
                        group.materialCode
                      }}</text>
                      <text class="material-name">{{
                        group.materialName
                      }}</text>
                    </view>
                    <view class="summary-info">
                      <text class="summary-text">
                        计划: {{ group.totalPlanQuantity }}{{ group.unit }} |
                        实际: {{ group.totalActualQuantity }}{{ group.unit }}
                      </text>
                      <text class="detail-count"
                        >共{{ group.details.length }}条明细</text
                      >
                    </view>
                  </view>
                  <view class="expand-icon">
                    <text
                      class="cuIcon-unfold"
                      :class="{
                        expanded: isMaterialGroupExpanded(
                          item.id,
                          group.materialCode
                        ),
                      }"
                    ></text>
                  </view>
                </view>

                <!-- 物料分组明细列表 -->
                <view
                  v-if="isMaterialGroupExpanded(item.id, group.materialCode)"
                  class="group-details"
                >
                  <view
                    v-for="detail in group.details"
                    :key="detail.id"
                    class="detail-item-card"
                  >
                    <view class="detail-body">
                      <view class="detail-row">
                        <view class="detail-col">
                          <text class="label">规格</text>
                          <text class="value">{{
                            detail.specification || "-"
                          }}</text>
                        </view>
                        <view class="detail-col">
                          <text class="label">颜色</text>
                          <text class="value">{{ detail.color || "-" }}</text>
                        </view>
                      </view>
                      <view class="detail-row">
                        <view class="detail-col">
                          <text class="label">计划入库数量</text>
                          <text class="value quantity"
                            >{{ detail.planQuantity }}{{ detail.unit }}</text
                          >
                        </view>
                        <view class="detail-col">
                          <text class="label">实际入库数量</text>
                          <text class="value quantity"
                            >{{ detail.actualQuantity || 0
                            }}{{ detail.unit }}</text
                          >
                        </view>
                      </view>
                      <view class="detail-row">
                        <view class="detail-col">
                          <text class="label">计划仓库</text>
                          <text class="value">{{
                            detail.planWarehouseName || "-"
                          }}</text>
                        </view>
                        <view class="detail-col">
                          <text class="label">实际仓库</text>
                          <text class="value">{{
                            detail.actualWarehouseName || "-"
                          }}</text>
                        </view>
                      </view>
                      <view class="detail-row">
                        <view class="detail-col">
                          <text class="label">计划库位</text>
                          <text class="value">{{
                            detail.planLocationName || "-"
                          }}</text>
                        </view>
                        <view class="detail-col">
                          <text class="label">实际库位</text>
                          <text class="value">{{
                            detail.actualLocationName || "-"
                          }}</text>
                        </view>
                      </view>
                      <view v-if="detail.batchNo" class="detail-row">
                        <view class="detail-col full-width">
                          <text class="label">批次号</text>
                          <text class="value">{{ detail.batchNo }}</text>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <!-- 操作按钮区域 -->
          <view class="action-buttons">
            <view
              v-if="
                item.statusText == '待入库' || item.statusText == '部分入库'
              "
              class="action-btn execute-btn"
              @click.stop="executeInbound(item)"
            >
              <text class="btn-text">执行入库</text>
            </view>
            <view
              class="action-btn collapse-btn"
              @click.stop="toggleExpand(item.id)"
            >
              <text class="cuIcon-fold"></text>
              <text class="btn-text">收起</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <view class="load-more" v-if="hasMore" @click="loadMore">
      <text class="load-text">{{ loading ? "加载中..." : "加载更多" }}</text>
    </view>

    <!-- 筛选弹窗 -->
    <view
      class="filter-modal"
      v-if="showFilterModal"
      @click="showFilterModal = false"
    >
      <view class="filter-content" @click.stop>
        <view class="filter-header">
          <text class="filter-title">筛选条件</text>
          <text class="close-btn" @click="showFilterModal = false">×</text>
        </view>
        <view class="filter-body">
          <!-- 模糊查询字段 -->
          <view class="filter-group">
            <text class="group-title">查询条件</text>
            <view class="input-group">
              <view class="input-item">
                <text class="input-label">入库单号</text>
                <input
                  class="input-field"
                  v-model="filterForm.orderNo"
                  placeholder="请输入入库单号"
                />
              </view>
            </view>
          </view>

          <!-- 入库类型筛选 -->
          <view class="filter-group">
            <text class="group-title">入库类型</text>
            <view class="checkbox-group">
              <view
                v-for="type in orderTypes"
                :key="type.value"
                class="checkbox-item"
                :class="{ checked: selectedTypes.includes(type.value) }"
                @click="toggleType(type.value)"
              >
                <text class="checkbox-text">{{ type.label }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="filter-footer">
          <view class="filter-btn reset" @click="resetFilter">重置</view>
          <view class="filter-btn confirm" @click="applyFilter">确定</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "MaterialInbound",
  data() {
    return {
      loading: false,
      hasMore: true,
      pageNo: 1,
      pageSize: 20,
      searchKeyword: "",
      activeTab: "all",
      showFilterModal: false,
      expandedItems: [],
      expandedMaterialGroups: {}, // 记录每个入库单中展开的物料分组
      inboundList: [],
      selectedTypes: [],
      filterForm: {
        orderNo: "",
        supplierName: "",
        warehouseName: "",
        createBy: "",
      },
      businessTypeTabs: [
        { value: "all", label: "全部" },
        { value: "11", label: "采购入库" },
        { value: "12", label: "余料入库" },
        { value: "13", label: "仓库调拨入库" },
        { value: "19", label: "其他入库" },
      ],
      orderTypes: [
        { value: 11, label: "采购入库" },
        { value: 12, label: "余料入库" },
        { value: 13, label: "仓库调拨入库" },
        { value: 19, label: "其他入库" },
      ],
    };
  },

  onLoad() {
    this.loadInboundData();
  },

  onShow() {
    this.loadInboundData();
  },

  onPullDownRefresh() {
    this.refreshData();
  },

  methods: {
    async loadInboundData(isRefresh = false) {
      if (this.loading) return;

      this.loading = true;

      if (isRefresh) {
        this.pageNo = 1;
        this.inboundList = [];
        this.hasMore = true;
      }

      try {
        const orderTypes = this.getFilteredOrderTypes();
        const params = {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          searchKeyword: this.searchKeyword,
          orderTypes: orderTypes,
          orderNo: this.filterForm.orderNo,
          supplierName: this.filterForm.supplierName,
          warehouseName: this.filterForm.warehouseName,
          createBy: this.filterForm.createBy,
        };
        const response = await this.$http.get(
          "/wms/inboundOrder/queryForMobile",
          {
            params: params,
          }
        );
        if (response.data.success) {
          const newData = response.data.result?.records || [];
          // 为每个入库单添加状态类和状态文本
          const processedData = newData.map((record) => {
            const item = {
              id: record.id,
              inboundNo: record.inboundNo || "",
              businessNo: record.businessNo || "",
              statusName: record.statusName || "",
              businessTypeName: record.businessTypeName || "",
              planInboundTime: record.planInboundTime,
              actualInboundTime: record.actualInboundTime,
              orderStatus: this.mapStatus(record.status),
              orderType: record.businessType,
              supplier: record.supplier,
              batchNo: record.batchNo,
              createTime: record.createTime,
              createBy: record.createBy,
              operatorNames: record.operatorNames || "",
              totalCost: record.totalCost || 0,
              details: [], // 明细数据，点击展开时加载
              statusClass: this.calculateStatusClass(record.status),
              statusText: this.calculateStatusText(record.status),
              orderTypeClass: this.calculateOrderTypeClass(record.businessType),
              orderTypeTextClass: this.calculateOrderTypeClass(
                record.businessType
              ),
            };
            return item;
          });

          if (isRefresh) {
            this.inboundList = processedData;
          } else {
            this.inboundList = [...this.inboundList, ...processedData];
          }

          this.hasMore = newData.length === this.pageSize;
          this.pageNo++;
        } else {
          const errorMessage = response.data.message || "加载失败";
          console.error("API返回错误:", errorMessage);
          uni.showToast({
            title: errorMessage,
            icon: "none",
          });
        }
      } catch (error) {
        console.error("加载入库单数据失败:", error);
        let errorMessage = "网络错误";

        if (error && error.errMsg) {
          errorMessage = error.errMsg;
        } else if (error && error.data && error.data.message) {
          errorMessage = error.data.message;
        } else if (error && error.message) {
          errorMessage = error.message;
        } else if (error && error.statusText) {
          errorMessage = error.statusText;
        } else if (typeof error === "string") {
          errorMessage = error;
        }

        uni.showToast({
          title: errorMessage,
          icon: "none",
        });
      } finally {
        this.loading = false;
        if (isRefresh) {
          uni.stopPullDownRefresh();
        }
      }
    },

    refreshData() {
      this.loadInboundData(true);
    },

    loadMore() {
      if (!this.loading && this.hasMore) {
        this.loadInboundData();
      }
    },

    async toggleExpand(itemId) {
      const index = this.expandedItems.indexOf(itemId);
      if (index > -1) {
        this.expandedItems.splice(index, 1);
      } else {
        this.expandedItems.push(itemId);
        // 加载明细数据
        await this.loadInboundDetails(itemId);
      }
    },

    async loadInboundDetails(inboundOrderId) {
      try {
        const response = await this.$http.get(
          "/wms/inboundOrder/queryDetailListForMobile",
          {
            params: {
              inboundOrderId: inboundOrderId,
            },
          }
        );

        if (response.data && response.data.success) {
          const details = response.data.result || [];
          // 按物料编号分组并汇总数据
          const groupedDetails = this.groupDetailsByMaterial(details);
          // 更新对应入库单的明细数据
          const item = this.inboundList.find(
            (item) => item.id === inboundOrderId
          );
          if (item) {
            this.$set(item, "details", details);
            this.$set(item, "groupedDetails", groupedDetails);
          }
        }
      } catch (error) {
        console.error("加载入库明细失败:", error);
        let errorMessage = "加载明细失败";

        if (error && error.errMsg) {
          errorMessage = error.errMsg;
        } else if (error && error.data && error.data.message) {
          errorMessage = error.data.message;
        } else if (error && error.message) {
          errorMessage = error.message;
        } else if (error && error.statusText) {
          errorMessage = error.statusText;
        } else if (typeof error === "string") {
          errorMessage = error;
        }

        uni.showToast({
          title: errorMessage,
          icon: "none",
        });
      }
    },

    toggleType(typeValue) {
      const index = this.selectedTypes.indexOf(typeValue);
      if (index > -1) {
        this.selectedTypes.splice(index, 1);
      } else {
        this.selectedTypes.push(typeValue);
      }
    },

    resetFilter() {
      this.filterForm = {
        orderNo: "",
        supplierName: "",
        warehouseName: "",
        createBy: "",
      };
      this.selectedTypes = [];
      this.searchKeyword = "";
    },

    applyFilter() {
      this.showFilterModal = false;
      this.refreshData();
    },

    switchTab(tabValue) {
      this.activeTab = tabValue;
      this.pageNo = 1;
      this.inboundList = [];
      this.hasMore = true;
      this.loadInboundData();
    },

    getFilteredOrderTypes() {
      if (this.activeTab !== "all") {
        return this.activeTab;
      } else if (this.selectedTypes.length > 0) {
        return this.selectedTypes.join(",");
      } else {
        return "";
      }
    },

    getOrderTypeText(orderType) {
      const typeObj = this.orderTypes.find((type) => type.value === orderType);
      return typeObj ? typeObj.label : "未知";
    },

    mapStatus(status) {
      // 根据实际字典数据映射状态
      const statusMap = {
        1: "pending", // 待入库
        2: "completed", // 已入库
        3: "partial", // 部分入库
        4: "rejected", // 已驳回
      };
      return statusMap[status] || "pending";
    },

    calculateStatusClass(item) {
      const statusMap = {
        1: "status-pending",
        2: "status-completed",
        3: "status-partial",
        4: "status-rejected",
      };
      return statusMap[item] || "status-pending";
    },

    calculateStatusText(item) {
      const statusMap = {
        1: "待入库",
        2: "已入库",
        3: "部分入库",
        4: "已驳回",
      };
      return statusMap[item] || "待入库";
    },

    calculateOrderTypeClass(orderType) {
      const typeClassMap = {
        11: "type-purchase", // 采购入库 - 蓝色
        12: "type-production", // 余料入库 - 绿色
        13: "type-transfer", // 仓库调拨入库 - 紫色
        19: "type-other", // 其他入库 - 灰色
      };
      return typeClassMap[orderType] || "type-default";
    },

    formatAmount(amount) {
      if (!amount) return "0.00";
      return parseFloat(amount).toFixed(2);
    },

    // 按物料编号分组并汇总数据
    groupDetailsByMaterial(details) {
      const groups = {};

      details.forEach((detail) => {
        const materialCode = detail.materialCode;

        if (!groups[materialCode]) {
          groups[materialCode] = {
            materialCode: detail.materialCode,
            materialName: detail.materialName,
            specification: detail.specification,
            color: detail.color,
            unit: detail.unit,
            // 计划入库汇总数量为三条明细的最大计划入库数量值
            totalPlanQuantity: detail.planQuantity || 0,
            // 实际入库数量为三条明细的实际入库数量的总和
            totalActualQuantity: parseFloat(detail.actualQuantity || 0),
            details: [detail],
          };
        } else {
          // 更新汇总数据
          groups[materialCode].totalPlanQuantity = Math.max(
            groups[materialCode].totalPlanQuantity,
            detail.planQuantity || 0
          );
          groups[materialCode].totalActualQuantity += parseFloat(
            detail.actualQuantity || 0
          );
          groups[materialCode].details.push(detail);
        }
      });

      return Object.values(groups);
    },

    // 切换物料分组的展开状态
    toggleMaterialGroup(inboundOrderId, materialCode) {
      if (!this.expandedMaterialGroups[inboundOrderId]) {
        this.$set(this.expandedMaterialGroups, inboundOrderId, []);
      }

      const expandedGroups = this.expandedMaterialGroups[inboundOrderId];
      const index = expandedGroups.indexOf(materialCode);

      if (index > -1) {
        expandedGroups.splice(index, 1);
      } else {
        expandedGroups.push(materialCode);
      }
    },

    // 检查物料分组是否展开
    isMaterialGroupExpanded(inboundOrderId, materialCode) {
      return (
        this.expandedMaterialGroups[inboundOrderId] &&
        this.expandedMaterialGroups[inboundOrderId].includes(materialCode)
      );
    },

    formatDate(dateStr) {
      if (!dateStr) return "-";
      const date = new Date(dateStr);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
        2,
        "0"
      )}-${String(date.getDate()).padStart(2, "0")}`;
    },

    openFilterModal() {
      this.showFilterModal = true;
    },

    executeInbound(item) {
      // 跳转到物料单入库页面执行入库操作
      uni.navigateTo({
        url: `/pages/wms/material/inbound-execute?inboundOrderId=${item.id}&inboundNo=${item.inboundNo}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.material-inbound {
  background: #f5f7fa;
  min-height: 100vh;
}

// 自定义导航栏样式
.nav-title {
  font-size: 36rpx;
  font-weight: 600;
  color: white;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 8rpx 16rpx;

  .filter-text {
    font-size: 28rpx;
    color: white;
  }
}

// 标签页样式
.tabs-container {
  background: white;
  border-bottom: 1rpx solid #f0f0f0;
}

.tabs-scroll {
  white-space: nowrap;
}

.tabs-wrapper {
  display: flex;
  padding: 0 24rpx;
}

.tab-item {
  position: relative;
  padding: 24rpx 32rpx;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.3s ease;

  &.active {
    .tab-text {
      color: #007aff;
      font-weight: 600;
    }
  }
}

.tab-text {
  font-size: 28rpx;
  color: #666;
  transition: color 0.3s ease;
}

.tab-indicator {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background: #007aff;
  border-radius: 2rpx;
}

// 入库单列表样式
.inbound-list {
  padding: 0 24rpx;
}

.inbound-item {
  background: white;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;

  &.expanded {
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
  }
}

.item-header {
  position: relative;
  padding: 32rpx 24rpx;
  cursor: pointer;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.primary-info {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.order-info {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.order-no {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.supplier-name {
  font-size: 26rpx;
  color: #666;
}

.status-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8rpx;
  background: transparent;
  border: none;
}

.status-value {
  font-size: 26rpx;
  font-weight: 600;
  padding: 0;
  border: none;
  background: transparent;
}

.status-text {
  font-size: 22rpx;
  font-weight: 500;
  margin-top: 4rpx;
}

.amount-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4rpx;
}

.amount-label {
  font-size: 24rpx;
  color: #999;
}

.amount-value {
  font-size: 28rpx;
  font-weight: 600;
  color: #ff6b35;
}

.amount-unit {
  font-size: 24rpx;
  color: #999;
}

.expand-icon {
  margin-left: 16rpx;
  transition: transform 0.3s ease;

  &.rotated {
    transform: rotate(180deg);
  }
}

.status-indicator {
  position: absolute;
  top: 16rpx;
  right: 16rpx;
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;

  &.status-pending {
    background: #ff9500;
  }

  &.status-partial {
    background: #007aff;
  }

  &.status-completed {
    background: #34c759;
  }

  &.status-rejected {
    background: #ff3b30;
  }
}

.order-type-indicator {
  position: absolute;
  bottom: 16rpx;
  right: 16rpx;
  width: 8rpx;
  height: 32rpx;
  border-radius: 4rpx;

  &.type-purchase {
    background: #007aff;
  }

  &.type-production {
    background: #34c759;
  }

  &.type-transfer {
    background: #52dede;
  }

  &.type-other {
    background: #ff6f00;
  }
}

// 操作按钮区域样式
.action-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-top: 1rpx solid #f0f0f0;
  margin-top: 20rpx;
}

.action-buttons {
  display: flex;
  gap: 16rpx;
  //右侧显示
  justify-content: flex-end;
}

.action-btn {
  padding: 12rpx 24rpx;
  border-radius: 20rpx;
  font-size: 26rpx;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.execute-btn {
  background: #007aff;
  color: white;

  &:active {
    background: #0056b3;
    transform: scale(0.95);
  }
}

.btn-text {
  color: inherit;
}

.collapse-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 8rpx 16rpx;
  color: #666;
  cursor: pointer;
  transition: color 0.3s ease;

  &:active {
    color: #007aff;
  }
}

.collapse-text {
  font-size: 26rpx;
}

//* 详情展开区域 */
.item-details {
  background: #f8f9fa;
  padding: 30rpx;
  border-top: 1px solid #eee;
}

.details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  padding-bottom: 15rpx;
  border-bottom: 1px solid #e0e0e0;
}

.details-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.details-count {
  font-size: 24rpx;
  color: #666;
  background: #e3f2fd;
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
}

.details-content {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.no-details {
  text-align: center;
  padding: 60rpx 0;
  color: #999;
  font-size: 28rpx;
}

.detail-item-card {
  background: #fff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.detail-item-card .detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding-bottom: 15rpx;
  border-bottom: 1px solid #f0f0f0;
}

.material-code {
  font-size: 30rpx;
  font-weight: 600;
  color: #1976d2;
}

.material-name {
  font-size: 26rpx;
  color: #666;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-body {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
}

.detail-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}

.detail-col.full-width {
  flex: 1;
}

.detail-col .label {
  font-size: 24rpx;
  color: #999;
}

.detail-col .value {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.detail-col .value.quantity {
  color: #1976d2;
  font-weight: 600;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.detail-item .label {
  font-size: 24rpx;
  color: #999;
}

.detail-item .value {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.detail-item .value.status {
  font-size: 28rpx;
  font-weight: 600;
}

.status-completed {
  color: #34c759;
}

.status-rejected {
  color: #ff3b30;
}

.status-pending {
  color: #ff9500;
}

.status-partial {
  color: #007aff;
}

// 业务类型文本颜色样式
.type-purchase {
  color: #007aff;
  font-weight: 600;
}

.type-production {
  color: #34c759;
  font-weight: 600;
}

.type-transfer {
  color: #52d5de;
  font-weight: 600;
}

.type-other {
  color: #f57c00;
  font-weight: 600;
}

// 加载更多样式
.load-more {
  padding: 32rpx;
  text-align: center;
  cursor: pointer;
}

.load-text {
  font-size: 28rpx;
  color: #666;
}

// 筛选弹窗样式
.filter-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
}

.filter-content {
  background: white;
  border-radius: 24rpx 24rpx 0 0;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
}

.filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 24rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.filter-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.close-btn {
  font-size: 48rpx;
  color: #999;
  cursor: pointer;
}

.filter-body {
  max-height: 60vh;
  overflow-y: auto;
  padding: 24rpx;
}

.filter-group {
  margin-bottom: 32rpx;
}

.group-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 16rpx;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.input-item {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.input-label {
  font-size: 26rpx;
  color: #666;
}

.input-field {
  padding: 16rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
  font-size: 28rpx;
  background: #fafafa;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.checkbox-item {
  padding: 12rpx 24rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 24rpx;
  cursor: pointer;
  transition: all 0.3s ease;

  &.checked {
    background: #007aff;
    border-color: #007aff;

    .checkbox-text {
      color: white;
    }
  }
}

.checkbox-text {
  font-size: 26rpx;
  color: #666;
  transition: color 0.3s ease;
}

.filter-footer {
  display: flex;
  padding: 24rpx;
  gap: 16rpx;
  border-top: 1rpx solid #f0f0f0;
}

.filter-btn {
  flex: 1;
  padding: 16rpx;
  text-align: center;
  border-radius: 8rpx;
  font-size: 28rpx;
  cursor: pointer;

  &.reset {
    background: #f5f5f5;
    color: #666;
  }

  &.confirm {
    background: #007aff;
    color: white;
  }
}

// 物料分组样式
.material-group {
  margin-bottom: 24rpx;

  .group-header {
    background: #f8f9fa;
    border: 1rpx solid #e9ecef;
    border-radius: 12rpx;
    padding: 24rpx;
    margin-bottom: 16rpx;
    cursor: pointer;
    transition: all 0.3s ease;

    &:active {
      background: #e9ecef;
    }
  }

  .group-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16rpx;
  }

  .group-info {
    flex: 1;
  }

  .material-code {
    font-size: 32rpx;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 8rpx;
  }

  .material-name {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 4rpx;
  }

  .material-spec {
    font-size: 24rpx;
    color: #999;
  }

  .expand-icon {
    font-size: 32rpx;
    color: #007aff;
    transition: transform 0.3s ease;

    &.expanded {
      transform: rotate(180deg);
    }
  }

  .group-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .summary-label {
      font-size: 22rpx;
      color: #999;
      margin-bottom: 4rpx;
    }

    .summary-value {
      font-size: 28rpx;
      font-weight: 600;
      color: #2c3e50;
    }
  }

  .detail-count {
    display: flex;
    flex-direction: column;
    align-items: center;

    .count-label {
      font-size: 22rpx;
      color: #999;
      margin-bottom: 4rpx;
    }

    .count-value {
      font-size: 28rpx;
      font-weight: 600;
      color: #007aff;
    }
  }
}

.group-details {
  padding-left: 24rpx;
  border-left: 3rpx solid #e9ecef;
  margin-left: 12rpx;

  .detail-item {
    background: white;
    border: 1rpx solid #f0f0f0;
    border-radius: 8rpx;
    padding: 20rpx;
    margin-bottom: 12rpx;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12rpx;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .detail-label {
    font-size: 26rpx;
    color: #666;
    min-width: 120rpx;
  }

  .detail-value {
    font-size: 26rpx;
    color: #333;
    flex: 1;
    text-align: right;
  }

  .location-info {
    color: #007aff;
    font-weight: 500;
  }

  .quantity-info {
    color: #34c759;
    font-weight: 600;
  }

  .status-info {
    padding: 4rpx 12rpx;
    border-radius: 12rpx;
    font-size: 22rpx;

    &.pending {
      background: #fff3cd;
      color: #856404;
    }

    &.completed {
      background: #d4edda;
      color: #155724;
    }

    &.partial {
      background: #cce5ff;
      color: #004085;
    }
  }
}
</style>
